<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<select id="provice" onchange="provice_change(this)">
			<option>请选择省份</option>
		</select>
		<select id="city">
			<option>请选择城市</option>
		</select>
		
		<script src="js/citys.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			function $(name){
				return document.querySelector(name);
			}
			for (var i = 0; i < provice.length; i++) {
				$("#provice").innerHTML += "<option>"+provice[i].name+"</option>"
			}
			
			function provice_change(that){
				console.log(that);
				var p_index = that.value;
				console.log(p_index);
				var provice_data = provice[p_index];
				console.log(provice_data);
				var city_data = provice_data.city;
				
				$("#city").innerHTML = "<option>请选择城市</option>";
				for (var i = 0; i < city_data.length; i++) {
					$("#city").innerHTML += "<option value = "+i+">"+city_data[i].name+"</option>"
				}
			}
		</script>
	</body>
</html>
